<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>评论详情</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        #userInfoDialog {
            padding: 20px;
            width: 400px;
            display: none; /*隐藏层*/
        }

        #userInfoDialog p {
            padding: 10px 0;
        }

        .text {
            max-height: 3.6em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 1.2em;
        }

        .dialog-container {
            padding: 20px;
        }

        .dialog-header {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .dialog-content {
            margin-bottom: 10px;
        }

        .dialog-label {
            font-weight: bold;
        }

        .image-preview {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">评论列表</div>
        <div class="layui-card-body">
            <table id="commentList" lay-filter="commentFilter"></table>
        </div>
    </div>
</div>

<!--评论详情对话框-->
<div id="commentDialog" class="layui-card" style="display: none;">
    <div class="layui-card-header">评论详情</div>
    <div class="layui-card-body">
        <table class="layui-table">
            <tbody>
            <tr>
                <td class="dialog-label">评论ID:</td>
                <td id="commentId"></td>
            </tr>
            <tr>
                <td class="dialog-label">评论内容:</td>
                <td id="commentContent"></td>
            </tr>
            <tr>
                <td class="dialog-label">评论时间:</td>
                <td id="commentTime"></td>
            </tr>
            <tr>
                <td class="dialog-label">用户名:</td>
                <td id="username"></td>
            </tr>
            <tr>
                <td class="dialog-label">视频名:</td>
                <td id="videoTitle"></td>
            </tr>
            <tr>
                <td class="dialog-label">视频封面:</td>
                <td><img id="videoCover" class="image-preview" src="" alt="视频封面"></td>
            </tr>
            <tr>
                <td class="dialog-label">视频简介:</td>
                <td id="videoSummary"></td>
            </tr>
            <tr>
                <td class="dialog-label">用户注册时间:</td>
                <td id="userRegTime"></td>
            </tr>
            <tr>
                <td class="dialog-label">用户头像:</td>
                <td id="userAvatar"></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<!--评论修改对话框-->
<div id="editDialog" class="layui-card" style="padding: 20px; display: none;">
    <div class="layui-card-header">修改评论</div>
    <div class="layui-card-body">
        <form class="layui-form" lay-filter="editForm">
            <div class="layui-form-item">
                <label class="layui-form-label">评论内容</label>
                <div class="layui-input-block">
                    <input type="text" name="content" required lay-verify="required" placeholder="请输入评论内容" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="saveEdit">保存</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="../res/layui/layui.js"></script>
<script>
    layui.use(['table', 'layer', 'form', 'jquery'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;
        var currentRowData = null;

        table.render({
            elem: '#commentList',
            url: '/comment/list',
            page: {
                limit: 2,
                limits: [2, 5, 10, 15, 20]
            },
            cols: [[
                {type: 'checkbox'},
                {title: '评论ID', width: 180, type: 'numbers'},
                {title: '评论内容', field: 'content'},
                {
                    title: '评论时间',
                    templet: '<div>{{layui.util.toDateString(d.commtime, "yyyy年MM月dd日 HH:mm:ss")}}</div>'
                },
                {title: '用户名', templet: '<div>{{d.user.username}}</div>'},
                {title: '视频名', templet: '<div>{{d.video.title}}</div>'},
                {title: '视频封面', templet: '<div><img src="{{d.video.coverimg}}" alt="封面" class="image-preview"></div>'},
                {title: '视频简介', templet: '<div>{{d.video.summary}}</div>'},
                {title: '操作', templet: '#rowTools'}     // 自定义行工具栏
            ]],
            toolbar: '#toolbar',   //自定义头工具栏
        });

        //监听行工具事件
        table.on('tool(commentFilter)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            currentRowData = data;

            if (layEvent === 'details') {
                //显示详情对话框
                $('#commentId').text(data.id);
                $('#commentContent').text(data.content);
                $('#commentTime').text(layui.util.toDateString(data.commtime, "yyyy年MM月dd日 HH:mm:ss"));
                $('#username').text(data.user.username);
                $('#videoTitle').text(data.video.title);
                $('#videoCover').attr('src', data.video.coverimg);
                $('#videoSummary').text(data.video.summary);
                $('#userRegTime').text(layui.util.toDateString(data.user.regtime, "yyyy年MM月dd日 HH:mm:ss"));
                $('#userAvatar').text(data.user.img);

                layer.open({
                    type: 1,
                    title: '评论详情',
                    area: ['600px', '400px'],
                    content: $('#commentDialog')
                });
            } else if (layEvent === 'edit') {
                //弹出修改对话框
                form.val('editForm', {
                    content: data.content
                });

                layer.open({
                    type: 1,
                    title: '修改评论',
                    area: ['500px', '300px'],
                    content: $('#editDialog')
                });
            } else if (layEvent === 'del') {
                //弹出删除对话框
                layer.confirm('确定删除吗？', function (index) {
                    $.ajax({
                        url: '/comment/delete',
                        type: 'POST',
                        data: { id: data.id },
                        success: function (res) {
                            if (res.success) {
                                layer.msg('删除成功');
                                table.reload('commentList');
                            } else {
                                layer.msg('删除失败');
                            }
                        }
                    });
                    layer.close(index);
                });
            }
        });

        //表单提交事件
        form.on('submit(saveEdit)', function (data) {
            var editedData = {
                id: currentRowData.id,
                content: data.field.content
            };

            $.ajax({
                url: '/comment/update',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(editedData),
                success: function (res) {
                    if (res.success) {
                        layer.msg('修改成功');
                        layer.closeAll('page');
                        table.reload('commentList');
                    } else {
                        layer.msg('修改失败');
                    }
                }
            });
            return false;
        });
    });
</script>

<!--操作栏自定义模板-->
<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-more"></i>
            详情
        </button>
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>
            修改
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </div>
</script>

</body>
</html>